<!-- reportingResults -->
<template>
    <div class="page">
        <div class="fh" @click="gBack()">
            <img class='contentg' src="../../assets/img/features/closeIcon.png" alt="">
        </div>
        <!-- 页面内容 -->
        <div class="content">
            <!---->
            <div class='contentTop'>
                <div class="contentTopLeft">报告生成</div>
                <img class='contentTopRight' src="../../assets/img/ybcb.png" alt="">
            </div>
            <!---->
            <div class="contentSectvon">
                <div class="contentSectvonTop">
                    <div>{{ reportGenerated }}</div>
                    <div>
                        {{ reportGenerated1 }}
                    </div>
                </div>
                <div class="contentSectvonBottom">
                    <div class="SectvonBottomdv" style="margin-top: 0px">
                        <div class="SectvonBottomdvLeft">邀请人</div>
                        <div class="SectvonBottomdvRght">
                            <span>{{ obj.applyManInfo }}</span>
                        </div>
                    </div>
                    <div class="SectvonBottomdv">
                        <div class="SectvonBottomdvLeft">邀请时间</div>
                        <div class="SectvonBottomdvRght">{{ obj.inviteTime }}</div>
                    </div>
                    <div class="SectvonBottomdv">
                        <div class="SectvonBottomdvLeft">邀请编码</div>
                        <div class="SectvonBottomdvRght"  @click="copyInviteCode(obj.inviteCode)">{{ obj.inviteCode }}
                        <span class="leftBut">复制</span>

                        </div>
                    </div>
                </div>
            </div>
            <!-- 报告标题 -->
            <div class="contentReportTte">
                <div></div>
                <div>报告内容</div>
                <div></div>
            </div>
            <!-- 报告内容 -->
            <div class="contentReportValue">
                <div class="reportValueLeft" v-if="obj.reportType == 1 || obj.reportType == 3">
                    <div class="reportValueLeftDv">
                        <img src="../../assets/img/jb.png" alt="">
                    </div>
                    <div class="reportValueLeftDv">简版</div>
                    <div class="reportValueLeftDv">
                        <div @click="preview(1)" v-log-button-name="'保单检视_导览页保存前_查看'">预览</div>
                    </div>
                    <!-- <fleeTime  style="margin-top: 20px;" :title="'预览'" @click="preview(1)"></fleeTime> -->
                </div>
                <div class="reportValueRight" v-if="obj.reportType == 2 || obj.reportType == 3">
                    <div class="reportValueRightDv">
                        <img src="../../assets/img/xb.png" alt="">
                    </div>
                    <div class="reportValueRightDv">详版</div>
                    <div class="reportValueRightDv">
                        <div @click="preview(2)" v-log-button-name="'保单检视_导览页保存前_查看'">预览</div>
                    </div>
                    <!-- <fleeTime  style="margin-top: 20px;" :title="'预览'" @click="preview(2)"></fleeTime> -->
                </div>
            </div>
            <!---->
            <!-- <div @click="goJst()" class="contentReportBtoom">{{jstText}}<span style="color: #44A1FD">{{jstText0}}</span>{{jstText1}}</div> -->
            <div @click="goJst()" class="contentReportBtoom" v-html="jstText"></div>
        </div>
        <div id="popup" v-if="showPopup" >
            复制成功
        </div>
    </div>
</template>

<script lang="ts" setup name="reportingResultxysc">
import { useRouter, useRoute } from "vue-router"
import { Toast, confirmDialog } from '/@/utils/reviewH5/Message'

import { onMounted } from "vue"
import { reactive, ref } from 'vue'
import customNavBar from "/src/components/NavBar/customNavBar.vue"
import viewReport from "../../assets/img/tast/htt.png"
import { taskInvitationInfo, getConfiguration, getConfigurationNew } from "../../api/auth/repot.ts"
import fleeTime from "/@/components/button/fleeTime.vue";
import { validatorCustomMark } from "/@/api/auth/addCustome";
import useClipboard from "vue-clipboard3";
import { sm2 } from 'sm-crypto';
//公钥串---加密使用
const publicKey = ref<string>("044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be")
//私钥串---解密使用
const privateKey = ref<string>("5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea")
// 加密方法
const JIAMIPublicData = (data: any): string => {
    const cipherMode = 1;
    const result = sm2.doEncrypt(data, publicKey.value, cipherMode);
    return `04${result}`;
}
// 解密方法
const JIMIPublicData = (data: any): string => {
    const cipherMode = 1;
    //data为加密的数据
    const result = sm2.doDecrypt(data.substring(2), privateKey.value, cipherMode)
    return result;
}
const router = useRouter()
const route = useRoute()
const leftTetx = ref("")
const contentSectionShow = ref(false)
const obj = ref({})
const reportGenerated = ref<any>()
const reportGenerated1 = ref<any>()
let data = reactive({
    ...route.query,
});

const gBack = () => {
    // router.go(-1)
    confirmDialog(router)
}
const textValue = ref<string>('');
const showPopup = ref<any>(false);
const { toClipboard } = useClipboard();
const copyInviteCode = async (val:any) => {
  try {
    textValue.value = val
    await toClipboard(textValue.value); 
    showPopup.value = true
    // Toast("复制成功");
    setTimeout(() => {
        showPopup.value = false
    }, 3000); // 5000毫秒 = 5秒
  } catch (e:any) {
    Toast(e);
  }
};
const goJst = () => {
    window.open('https://a.app.qq.com/o/simple.jsp?pkgname=com.sinosoft.csplatform')
}

const preview = (v: any) => {
    router.push({
        path: 'detailedVersion',
        query: {
            reportType: v,
            taskCode: data.taskCode,
            isYsc: 1,
            face: route.query.face,
        }
    })
}
const jstText = ref<any>('')
// const jstText0 = ref<any>('')
// const jstText1 = ref<any>('')
onMounted(async () => {
    // return
    // const a = await getConfiguration({ name: 'reportGenerated' })
    const a = await getConfigurationNew({ taskCode: data.taskCode })
    if(a.code == 402 ){
        router.push({ path: 'reportingResultwxts' })
    }
    reportGenerated.value = a.data.split('&')[0]
    reportGenerated1.value = a.data.split('&')[1]
    const b = await getConfiguration({ name: 'guideText' })
    jstText.value = b.data
    // jstText0.value = b.data.split('|')[1]
    // jstText1.value = b.data.split('|')[2]
    taskInvitationInfo({ taskCode: data.taskCode }).then((a: any) => {
        if (a.code == 200) {
            obj.value = a.data
        }
    });
})
</script>

<!-- less嵌套设置 -->
<style lang="less" scoped>
/* 弹窗样式 */
#popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 38px;
      background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      font-size: 14px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
.page {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, #8dc2f7 0%, #87C3FE 6%, #9BCEFE 11%, #B0DCFF 16%, #BAE1FE 21%, #D9EBFC 26%, #F5F7FA 100%), radial-gradient(0% 19% at 0% 0%, #90C7FF 0%, rgba(181, 222, 254, 0) 100%);

    .fh {
        text-align: left;
        margin-top: 30px;
        padding-left: 13px;
    }

    .contentg {
        width: 23px;
        height: 23px;
    }

    .content {
        width: 100%;
        overflow: hidden;

        .contentTop {
            width: 95%;
            max-width: 550px;
            margin: 0 auto;
            display: flex;
            padding: 0 30px;
            align-items: center;
            justify-content: space-between;

            .contentTopLeft {
                color: #15265A;
                font-size: 30px;
                font-weight: bold;
            }

            .contentTopRight {
                top: -10px;
                width: 130px;
                height: 130px;
                position: relative;
            }
        }

        .contentSectvon {
            // width: 343px;
            width: 95%;
            max-width: 550px;
            // height: 290px;
            height: auto;
            padding: 10px;
            overflow: hidden;
            // margin-left: 17px;
            margin: 0 auto;
            background: url(../../assets/img/ybcbg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .contentSectvonTop {
                font-size: 13px;
                color: #FFFFFF;
                margin-top: 19px;
                text-align: left;
                line-height: 23px;

                div:last-child {
                    margin-top: 3px;
                    text-indent: 10px;
                }
            }

            .contentSectvonBottom {
                // width: 319px;
                width: 100%;
                max-width: 550px;
                min-height: 121px;
                margin-top: 17px;
                padding: 17px 17px;
                border-radius: 10px;
                background: linear-gradient(180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246, 248, 254, 0.97) 67%, rgba(255, 255, 255, 0.95) 100%);

                .SectvonBottomdv {
                    display: flex;
                    margin-top: 13px;
                    justify-content: space-between;

                    .SectvonBottomdvLeft {
                        opacity: 0.57;
                        font-size: 13px;
                        color: #222222;
                        flex: 0 0 auto;;
                    }

                    .SectvonBottomdvRght {
                        font-size: 13px;
                        color: #222222;
                        font-weight: bold;
                        margin-left: 40px;

                        span:last-child {
                            margin-left: 7px;
                        }
                        .leftBut {
                            width: 100px;
                            height: 23px;
                            font-size: 12px;
                            padding:3px 8px;
                            font-weight: 400;
                            margin-left: 0px !important;
                            color: #0080FF;
                            line-height: 23px;
                            border-radius:8px;
                            background: rgba(25, 138, 250, 0.06);
                            border: 1px solid rgba(25, 138, 250, 0.32);
                        }
                    }
                }
            }
        }

        .contentReportTte {
            width: 100%;
            display: flex;
            margin-top: 30px;
            align-items: center;
            justify-content: center;

            div:nth-child(1) {
                width: 47px;
                height: 1px;
                opacity: 0.4;
                background: linear-gradient(270deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
            }

            div:nth-child(2) {
                font-size: 17px;
                color: #2E2E2E;
                font-weight: bold;
                margin-left: 40px;
            }

            div:nth-child(3) {
                width: 47px;
                height: 1px;
                opacity: 0.4;
                margin-left: 40px;
                background: linear-gradient(270deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
            }
        }

        .contentReportValue {
            padding: 0 19px;
            margin-bottom: 20px;
            width: 95%;
            height: 250px;
            margin: 0 auto;
            text-align: left;
            .reportValueLeft {
                display: inline-block;
                width: 45%;
                text-align: center;
                display: inline-block;
                // max-width:200px;
                margin-top: 17px;
                margin-left: 3%;
                padding: 16px 0 16px 0;
                box-shadow: 0px 2 6px 0px rgba(0,63,159,0.1);
                background: linear-gradient( 180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246,248,254,0.97) 67%, rgba(255,255,255,0.95) 100%);
                .reportValueLeftDv {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
                .reportValueLeftDv:nth-child(1) img {
                    width: 53px;
                    height: 53px;
                    margin-top: 10px;
                }
                .reportValueLeftDv:nth-child(2) {
                    font-size: 15.7px;
                    margin-top: 7px;
                    color: #222222;
                    font-weight: bold;
                }
                .reportValueLeftDv:nth-child(3) div {
                    width: 90px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25,138,250,0.06);
                    border: 1px solid rgba(25,138,250,0.32);
                }
                .reportValueLeftDv:nth-child(4) div {
                    width: 90px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25,138,250,0.06);
                    border: 1px solid rgba(25,138,250,0.32);
                }
            }
            .reportValueRight {
                display: inline-block;
                width: 45%;
                background-color: gold;
                text-align: center;
                display: inline-block;
                // max-width: 200px;
                margin-top: 17px;
                margin-left: 3%;
                padding: 16px 0 16px 0;
                box-shadow: 0px 2 6px 0px rgba(0,63,159,0.1);
                background: linear-gradient( 180deg, #F0F3FE 0%, #F5F7FE 6%, #FDFDFE 11%, #FEFEFE 22%, #FDFDFE 48%, rgba(246,248,254,0.97) 67%, rgba(255,255,255,0.95) 100%);
                .reportValueRightDv {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
                .reportValueRightDv:nth-child(1) img {
                    width: 53px;
                    height: 53px;
                    margin-top: 10px;
                }
                .reportValueRightDv:nth-child(2) {
                    font-size: 15.7px;
                    margin-top: 7px;
                    color: #222223;
                    font-weight: bold;
                }
                .reportValueRightDv:nth-child(3) div {
                    width: 90px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25,138,250,0.06);
                    border: 1px solid rgba(25,138,250,0.32);
                }
                .reportValueRightDv:nth-child(4) div {
                    width: 90px;
                    height: 23px;
                    font-size: 15px;
                    margin-top: 13px;
                    color: #0080FF;
                    line-height: 23px;
                    border-radius: 13px;
                    background: rgba(25,138,250,0.06);
                    border: 1px solid rgba(25,138,250,0.32);
                }
            }
            @media (min-width: 450px) {
                .reportValueLeft,.reportValueRight {
                    width: 45%;
                    margin-left: 4%;
                }
            }
            @media (min-width: 550px) {
                .reportValueLeft,.reportValueRight {
                    width: 40%;
                    margin-left: 7%;
                }
            }
            @media (min-width: 650px) {
                .reportValueLeft,.reportValueRight {
                    width: 35%;
                    margin-left: 10%;
                }
            }
         
        }

        .contentReportBtoom {
            width: 95%;
            max-width: 550px;
            margin: 0 auto;
            margin-top: 30px;
            font-size: 13px;
            padding: 0 19px;
            text-align: left;
            color: #808080;
            margin-bottom: 20px;
        }
    }
}
</style>
